<template>
<div>
  <div @click="()=>$refs.FormMenuMange.init(apps)" class='appItem'>
    <el-popover
      placement="top"
      width="150"
      trigger="hover"
    >
      <div class="popover-wrap">
        <span @click="()=>$refs.updateInfo.init(apps)">修改信息</span>
        <span @click="()=>$refs.menuManage.init(apps)">菜单管理</span>
        <span @click="()=>$refs.FormMenuMange.init(apps)">表单管理</span>
        <span class="delete" @click="handleDelete(apps)">删除</span>
      </div>
      <i  class="el-icon-s-tools" slot="reference"/>
    </el-popover>
    <img :src="require(`@/assets/icons/icon1.png`)" alt="图标">
    <span >{{apps.appName}}</span>
  </div>
  <UpdateInfo ref="updateInfo"/>
  <MenuMange ref='menuManage'/>
  <FormMenuMange ref='FormMenuMange'/>
</div>

</template>
<script>
import { deleteApp } from '@/api/home'
import MenuMange from './menu-manage'
import FormMenuMange from './form-menu-manage'
import UpdateInfo from './update-info'
export default {
  props:{
    apps:{
      type: Object,
      default:()=>{}
    }
  },
  components:{
    UpdateInfo,
    MenuMange,
    FormMenuMange
  },
  data(){
    return{
      updateInfo:false,
      form:{name:''}
    }
  },
  methods:{
    //   goEditForm() {
    //   let url = '/nuwaform/design/' + this.$route.params.appId + '/' + this.$route.params.busiKey
    //   this.$router.push(url)
    // },
    handleDelete(apps){
      // 根据应用Id删除应用 /base/api/application-manager/del
      this.$confirm('删除应用则表单、仪表盘以及数据也都将一并删除，且无法还原。', `您确定要删除${apps.appName}吗？` , {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteApp({appId:apps.id}).then(res=>{
          if(res.code === 200){
            this.$message.success('删除成功!');
            this.$store.dispatch('application/getAllApp')//删除成功更新应用
          }else{
            this.$message.error('删除失败！')
          }
        })
      }).catch(()=>{})
    }
  }

}
</script>

<style lang='scss' scoped>
.appItem{
  cursor: pointer;
  width: 194px;
  height: 144px;
  margin: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  img{
    width: 60px;
    height: 60px;
  }
  i{
    display: none;
  }
  span{
    margin-top: 12px;
    color: #1f2d3d;
    font-size: 16px;
  }
  &:hover{
    box-sizing: border-box;
    border:1px solid rgb(209, 199, 199);
    border-radius:5px;
    box-shadow: 0 0 5px #888888;
    i{
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top:10px;
      right: 10px;
      &:hover{
        color: #0DB3A6;
      }
    }
  }
}
.popover-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  span{
    line-height: 30px;
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border-radius: 6px;
    &:hover{
      background: #f4f6f9;
    }
  }
  .delete{
    color: red;
  }

}
</style>